// 声明背景图片数组，存储图片路径
const bgArr = ['./images/desktop_1.jpg','./images/desktop_2.jpg','./images/desktop_3.jpg','./images/desktop_4.jpg','./images/desktop_5.jpg'];

// 获取背景图片标签元素
const bg = document.querySelectorAll('img');
// 获取所有的fieldset标签元素
const fd = document.querySelectorAll('.df');
// 获取添加区域的标签元素
const add = document.querySelector('.add');
// 获取添加页面点击按钮的父标签，用来注册事件委托
const addBtn = document.querySelector('.add_btn');
// 获取右侧导航栏标签用来注册绑定事件委托
const nav = document.querySelector('.nav');
// 添加界面按钮获取
const confAdd = document.querySelector('.add .conf_add');
// 获取case_nav父盒子,用来添加节点元素
const CaseNav = document.querySelector('.case_nav');
// reset()方法重置列表输入框数据
// 获取form表单标签
const form = document.querySelector('form');
// 获取输入框标签 用过All伪数组的方法，但会有一定的局限性，出现bug
const CaseTitle = document.querySelector('.add .title');
const contentA = document.querySelector('.contentA');
const contentB = document.querySelector('.contentB');
const contentC = document.querySelector('.contentC');
const contentD = document.querySelector('.contentD');
const contentE = document.querySelector('.contentE');
const contentF = document.querySelector('.contentF');

// 获取添加数据区域的标签
const addCases = document.querySelector('.addCases');

// 获取右侧导航的两个按钮
const navadd = document.querySelector('.nav_add')
const navtop = document.querySelector('.nav_top')

// 使用本地存储方法
// 声明数组，从本地存储中获取数组，没有就返回空数组
let arr = JSON.parse(localStorage.getItem('arr1')) || [];

// 调用函数，在没有点击时对第一次fieldset的渐变背景做渲染
getFieldsetColor();
// 使用数组forEach方法遍历背景图片盒子
bg.forEach((value, index) => {
    // 给每个图片盒子添加点击事件
    value.addEventListener('click', () => {
        // 根据bg盒子的下标从bgArr数组中获取对应的背景图片
        document.body.style.backgroundImage = `url(${bgArr[index]})`;
        document.querySelector('.tpyf').classList.remove('tpyf');
        value.classList.add('tpyf');
        // 调用fieldset渐变背景随机函数
        getFieldsetColor();
        // 新增元素背景渐变方法
        addCase();
        // 点击时，暂停定时器，暂停背景渐变刷新
        // clearInterval(timeID);
        // 点击时，暂停背景图轮播
        clearInterval(bgSetl);
    });
});

// 创建定时器作为公用定时器，2秒调换一次对应的函数 
const bgSetl = setInterval(() => {
    document.body.style.backgroundImage = `url(${bgArr[getRandom(0, bgArr.length - 1)]})`;
    // 调用背景颜色渐变随机函数，设置列表跟右侧导航按钮的背景渐变颜色
    getFieldsetColor();

    // 添加数据背景颜色渐变
    add.style.background = `linear-gradient(${getRandomColor()},${getRandomColor()})`;

    // 新增元素背景渐变方法
    addCase();
}, 2000);

// 封装随机fieldset渐变背景颜色随机函数
function getFieldsetColor() {
    // 循环遍历fieldset标签元素，给fieldset设置随机渐变颜色
    fd.forEach(e => {
        e.style.background = `linear-gradient(${getRandomColor()},${getRandomColor()})`;
    });

    // 右侧导航的两个点击按钮背景颜色设置
    navadd.style.background = `linear-gradient(${getRandomColor()},${getRandomColor()})`;
    navtop.style.background = `linear-gradient(${getRandomColor()},${getRandomColor()})`;
};

// 封装随机函数
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

// 封装随机颜色函数
function getRandomColor(flag = true) {
    if (flag) {
        // 如果是true 则返回 #ffffff
        let str = '#';
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
        // 利用for循环随机抽6次 累加到 str里面
        for (let i = 1; i <= 6; i++) {
            // 每次要随机从数组里面抽取一个  
            // random 是数组的索引号 是随机的
            let random = getRandom(0, arr.length - 1);
            // str = str + arr[random]
            str += arr[random];
        };
        return str;
    } else {
        // 否则是 false 则返回 rgb(255,255,255)
        let r = Math.floor(Math.random() * 256);  // 55
        let g = Math.floor(Math.random() * 256);  // 89
        let b = Math.floor(Math.random() * 256);  // 255
        return `rgb(${r}, ${g}, ${b})`;
    };
};

// 添加数据模块
// 创建事件委托点击事件为右侧导航栏添加点击事件
nav.addEventListener('click', e => {
    // 判断点击的是否是添加数据按钮
    if (e.target.classList.contains('nav_add')) {
        // 显示添加数据盒子
        add.style.visibility = 'visible';
    };
    // 判断点击的是否是回到顶部按钮
    if (e.target.classList.contains('nav_top')) {
        // 点击回到顶部按钮时，让scrollTop为0
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    };
});

// 增加案例模块操作
// 创建事件委托为添加数据页面按钮点击事件
addBtn.addEventListener('click', e => {
    // 阻止表单提交默认行为
    e.preventDefault();
    // 判断用户是否点击的是确认新增按钮
    if (e.target.classList.contains('conf_add')) {
        // 显示新增盒子
        add.style.visibility = 'hidden';

        // 判断用户输入的值是否为空值，空置不进行新增操作，并作出提示
        if (CaseTitle.value !== '' && contentA.value !== '' && contentB.value !== '' && contentC.value !== '' && contentD.value !== '' && contentE.value !== '' && contentF.value !== '') {
            // 声明对象用来存储数据
            const Caseobj = {
                title: CaseTitle.value.trim(),
                contentA: contentA.value.trim(),
                contentB: contentB.value.trim(),
                contentC: contentC.value.trim(),
                contentD: contentD.value.trim(),
                contentE: contentE.value.trim(),
                contentF: contentF.value.trim(),
            };
            // 将对象添加到数组中
            arr.push(Caseobj);
            // 新增后渲染页面
            getRander();
            // 保存到本地存储中
            localStorage.setItem('arr1', JSON.stringify(arr));
        } else {
            alert('您输入的数据不能为空哦！');
        };
        // 重置表单清空输入框数据
        form.reset();
        // 刷新页面 解决页面渲染出现的bug
        window.location = location;
    };
    // 当用户点击取消新增按钮时，隐藏新增盒子，同时重置表单清空数据
    if (e.target.classList.contains('close')) {
        add.style.visibility = 'hidden';
        form.reset();
    };
    // 当用户点击重置按钮时，重置表单，清空输入框数据
    if (e.target.classList.contains('reslut')) {
        form.reset();
    };
});
// 删除案例模块操作
function removeAdd() {
    // 判断本地存储的数组是否为空，不等于空再执行删除操作，不然获取会报错
    if (arr.length !== 0) {
        const removeDiv = document.querySelectorAll('.add_remove');
        // 事件委托 创建点击事件
        for (let i = 0; i < removeDiv.length; i++) {
            // 为每个添加的案例模块盒子注册事件委托点击事件
            removeDiv[i].addEventListener('click', function (e) {
                if (e.target.classList.contains('remove')) {
                    // 获取删除按钮的自定义属性值
                    const index = e.target.dataset.id;
                    // 删除数组中与下标对应的元素
                    arr.splice(index, 1);
                    // 渲染页面
                    getRander();
                    // 保存到本地存储中
                    localStorage.setItem('arr1', JSON.stringify(arr));
                    // 刷新页面 解决页面渲染出现的bug
                    window.location = location;
                };
            });
        };
    };
};

// 新增案例模块页面渲染
function getRander() {
    const newArr = arr.map((v, index) => {
        return `
        <div class="case add_remove">
            <fieldset id="addCase" style="background: linear-gradient(${getRandomColor()},${getRandomColor()});">
                <legend>${v.title}</legend>
                    <ol>
                    <li><a>${v.contentA}</a></li>
                    <li><a>${v.contentB}</a></li>
                    <li><a>${v.contentC}</a></li>
                    <li><a>${v.contentD}</a></li>
                    <li><a>${v.contentE}</a></li>
                    <li><a>${v.contentF}</a></li>
                    </ol>
             </fieldset>
            <button class="remove" data-id="${index}">X</button>
        </div>
        `;
    });
    // 把内容渲染到添加模块标签中，之前试过添加在一个盒子中，但会影响固定模块的元素，部分功能无法实现，从而导致bug
    addCases.innerHTML = newArr.join("");
};
// 页面渲染
getRander();
// 删除方法，放在新增渲染方法后面，避免出现获取为空的情况
removeAdd();


// 新增标签背景渐变颜色方法
function addCase() {
    // 判断本地存储的数组是否为空，不等于空再获取所有新增的标签元素，不然会报错
    if (arr.length !== 0) {
        // 获取新增的所有fieldset标签
        const addfd = document.querySelectorAll('#addCase');
        // 循环遍历设置背景颜色
        addfd.forEach(e => {
            // 给每个新增的案例模块设置背景渐变颜色
            e.style.background = `linear-gradient(${getRandomColor()},${getRandomColor()})`;
        });
    };
};